<template>
    <rx-dialog @handOk="onOk" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form  :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                    <a-form-model-item v-if="showLabel" :label="i18n('form.label','标签')">
                        <a-input v-model="label"></a-input>
                    </a-form-model-item>
                    <a-form-model-item v-if="showLabel" :label="i18n('form.newLabel','新标签')">
                        <a-input  v-model="newLabel"></a-input>
                    </a-form-model-item>
                    <div v-if="visualMap">
                        <a-form-model-item :label="i18n('form.minValue','最小值')">
                            <a-input type="number" v-model="min"/>
                        </a-form-model-item>
                        <a-form-model-item :label="i18n('form.maxValue','最大值')">
                            <a-input  type="number" v-model="max"/>
                        </a-form-model-item>
                        <a-form-model-item :label="i18n('form.alignment','组件对齐')">
                            <a-radio-group default-value="left" button-style="solid" v-model="alignment">
                                <a-radio-button value="right">{{i18n('form.right','右')}}</a-radio-button>
                                <a-radio-button value="left">{{i18n('form.left','左')}}</a-radio-button>
                            </a-radio-group>
                        </a-form-model-item>
                        <a-form-model-item :label="i18n('form.color','颜色')">
                            <div class="ainput">
                                        <span v-for="(obj,index) in colors" :key="index">
                                            <a-input class="labeinput_list" v-model="colors[index]" type="color" :placeholder="i18n('form.labelColor','标签颜色')"/>
                                        </span>
                            </div>
                        </a-form-model-item>
                    </div>
                </a-form>
                <div class="range"v-if="!visualMap">
                    <div class="table-operator">
                        <i class="iconfont iconjia " @click="addRow"></i>
                        <i class="iconfont icontrash" @click="removeRow"></i>
                        <i class="iconfont iconshang" @click="upRow"></i>
                        <i class="iconfont iconxia" @click="downRow"></i>
                    </div>
                    <rx-grid ref="table"
                             :dataSource="fields"
                             :ellipsis="false"
                             :columns="columns"
                             :allowRowSelect="true"
                             :multiSelect="true"
                             :showPage="false"
                             borders="true"
                             :allowMoveColumn="false">
                        <!--    范围表达式         -->
                        <span slot="express_name" slot-scope="{text,record,index,blur}">
                                    <a-select
                                        :getPopupContainer="p=>p.parentNode"
                                        label-in-value
                                        :default-value="{ key: record.express_value }"
                                        style="width: 100px"
                                        @change="handleChange($event,record)"
                                    >
                         <a-select-option v-for="aselecvt in compare" :value="aselecvt.value">
                           {{ aselecvt.name }}
                         </a-select-option>
                         </a-select>
                            <!--               express  范围表达-->
                          <a-input style="width: 100px" class="aselect" type="number"
                                   :placeholder="record.express_value=='in'?i18n('geq','大于等于'):''"
                                   v-model="record.express_name"/>
                          <a-input style="width: 100px" class="aselect" type="number" v-if="record.express_value=='in'"
                                   :placeholder="record.express_value=='in'?i18n('leq','小于等于'):''"
                                   v-model="record.express_name2"/>
                      </span>
                        <span slot="color" slot-scope="{text,record}">
                            <a-input class="be_colour" type="color" v-model="record.color"/>
                      </span>
                    </rx-grid>
                </div>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {RxGrid, Util, Dialog} from "@lowcode/jpaas-common-lib";

export default {
    name: "color-setting",
    props: ["layerid", "destroy", "fieldSetting", 'showLabel', "visualMap"],
    components: {
        RxGrid,
        Dialog
    },
    data() {
        return {
            fields: [],
            fieldDataType: 'string',
            columns: [{
                title: this.$ti18('rxList.index','序号'),
                width: 70,
                dataIndex: 'index',
                type: 'indexColumn',
                scopedSlots: {customRender: 'index'}
            },
                {title: this.i18n('form.rangeExpress','范围表达式'), dataIndex: 'express_name', scopedSlots: {customRender: 'express_name'}, width: 300},
                {title: this.i18n('form.color','颜色'), width: 100, dataIndex: 'color', scopedSlots: {customRender: 'color'}},
            ],
            value: 'eq',//默认等于
            label: '',
            newLabel: '',
            compare: [
                {
                    value: 'eq',
                    name: this.i18n('eq','等于')
                },
                {
                    value: 'gt',
                    name: this.i18n('overtake','大于')
                },
                {
                    value: 'ge',
                    name: this.i18n('geq','大于等于')
                },
                {
                    value: 'lt',
                    name: this.i18n('under','小于')
                },
                {
                    value: 'le',
                    name: this.i18n('leq','小于等于')
                },
                {
                    value: 'in',
                    name: this.i18n('range','范围')
                }
            ],
            max:1000,
            min:0,
            alignment:"right",
            colors:['#87CEFA', '#FFFF00', '#FF4500']
        }
    },
    computed: {
        table() {
            return this.$refs.table;
        },
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartDef", key);
        },
        init() {
            if (this.fieldSetting && this.fieldSetting.colorSetting) {
                this.label = this.fieldSetting.colorSetting.label;
                this.newLabel = this.fieldSetting.colorSetting.newLabel;
                if(!this.visualMap){
                    this.fields = this.fieldSetting.colorSetting.settings || [];
                }else {
                    this.max = this.fieldSetting.colorSetting.max || 1000;
                    this.min = this.fieldSetting.colorSetting.min || 0;
                    this.alignment = this.fieldSetting.colorSetting.alignment || "right";
                    this.colors = this.fieldSetting.colorSetting.colors || this.colors;
                }
            }
        },
        handleChange(value, record) {
            if (value) {
                record.express_value = value.key;
            }
        },
        handlerNumber(express_name, flag) {
            return (!flag || this.fieldDataType == 'number') ? express_name : '\"' + express_name + '\"';
        },
        addRow() {
            this.table.addRow({express_value: 'eq', color: '#1890ff'});
        },
        removeRow() {
            this.table.removeRows();
        },
        upRow() {
            this.table.moveUp();
        },
        downRow() {
            this.table.moveDown();
        },
        onOk() {
            var data={label: this.label, newLabel: this.newLabel};
            if(this.visualMap){
                data["max"]=this.max;
                data["min"]=this.min;
                data["alignment"]=this.alignment;
                data["colors"]=this.colors;
            }else {
                data["settings"]=this.fields;
            }
            Util.closeWindow(this, "ok", data);
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
        addColor(){

        },
        delColor(){

        }
    }
}
</script>

<style scoped>
.table-operator {
    float: right;
}

.table-operator > i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #f5f7fa;
    border: solid 1px #dadde0;
    border-left: none;
    display: block;
    float: left;
}

.table-operator > i:nth-child(1) {
    border-left: solid 1px #dadde0;
    border-radius: 5px 0px 0px 5px;
}

.table-operator > i:nth-child(4) {
    border-radius: 0px 5px 5px 0px;
}

.rendering {
    border-left: 3px solid #1890ff;
    height: 10px;
    line-height: 10px;
    padding-left: 5px;
    width: 100px;
    float: left;
    margin-top: 16px;
}

.aselect {
    width: calc(100% - 120px);
    margin-left: 10px;
}

.effect {
    padding: 3px 10px 3px 10px;
    border-radius: 5px;
}

.rcgrid {
    height: calc(100% - 50px);
}

.be_colour {
    width: 50px;
}

.range {
    height: 100%;
    padding: 20px;

}
</style>